<template>
	<el-card>
		<el-row slot="header" type="flex" class="row-bg" justify="space-between">
			<span>标签列表</span>
			<el-button v-permission="'article:tag:create'" icon="el-icon-circle-plus-outline" type="primary" @click="insert_dialog_visible = true" plain>添加标签
			</el-button>
		</el-row>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column label="#" type="index" prop="tag_id" width="300px">
			</el-table-column>
			<el-table-column prop="tag_name" label="标签名称">
			</el-table-column>
			<el-table-column label="创建时间">
				<template slot-scope="scope">
					<span>{{ localeTimestamp(scope.row.create_date) }}</span>
				</template>
			</el-table-column>
			<el-table-column label="编辑时间">
				<template slot-scope="scope">
					<span>{{ localeTimestamp(scope.row.update_date) }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button v-permission="'article:tag:edit'" @click="openEditDialog(scope.row)" icon="el-icon-edit">编辑</el-button>
					<el-button v-permission="'article:tag:remove'" type="danger" @click="handleRemove(scope.row.tag_id,scope.$index)" icon="el-icon-delete">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 添加标签 -->
		<el-dialog title="提示" :visible.sync="insert_dialog_visible" @close="handleCloseDialog('insert_form')">
			<el-form :model="insert_form" :rules="rules" ref="insert_form" status-icon label-width="100px">
				<el-form-item label="标签名称" prop="tag_name">
					<el-input type="text" v-model="insert_form.tag_name" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="insert_dialog_visible = false">取 消</el-button>
				<el-button type="primary" @click="handleInsert">添 加</el-button>
			</span>
		</el-dialog>
		<!-- 编辑标签 -->
		<el-dialog title="提示" :visible.sync="edit_dialog_visible" @close="handleCloseDialog('edit_form')">
			<el-form :model="edit_form" :rules="rules" ref="edit_form" status-icon label-width="100px">
				<el-form-item label="标签名称" prop="tag_name">
					<el-input type="text" v-model="edit_form.tag_name" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="edit_dialog_visible = false">取 消</el-button>
				<el-button type="primary" @click="handleEdit">保 存</el-button>
			</span>
		</el-dialog>
	</el-card>
</template>

<script>
import { Tag } from '@/api';
export default {
	name: 'List',
	data() {
		return {
			tableData: [],
			insert_dialog_visible: false,
			insert_form: {
				tag_name: '',
				create_date: new Date().toLocaleString(),
				update_date: new Date().toLocaleString(),
			},
			edit_dialog_visible: false,
			edit_form: { tag_name: '' },
			//缓存当前操作的row--指针地址
			current_tag: '',
			rules: {
				tag_name: [{
					required: true,
					message: '请输入标签名',
					trigger: 'blur',
				}],
			}
		}
	},
	created() {
		this.loadList();
	},
	computed: {
		localeTimestamp() {
			return (timestamp) => {
				return new Date(timestamp).toLocaleString();
			}
		}
	},
	methods: {
		// 加载列表
		async loadList() {
			let { status, msg, data } = await Tag.list({ pagesize: 20 });
			if (status) {
				this.tableData = data;
			}
		},
		// 添加标签
		handleInsert() {
			this.$refs.insert_form.validate(async (valid) => {
				if (valid) {
					let { status, msg, data } = await Tag.create({ ...this.insert_form });
					if (status) {
						// 操作DOM
						this.tableData.push({ ...this.insert_form, ...data });
						// 关闭弹窗
						this.insert_dialog_visible = false;
						// 信息提示
						this.$message.success(msg);
					} else {
						// 信息提示
						this.$message.error(msg);
					}
				}
			});
		},
		//打开编辑弹窗
		openEditDialog(tag) {
			//缓存当前操作tag
			this.current_tag = tag;
			//还原表单
			this.edit_form = { ...tag };
			//打开弹窗
			this.edit_dialog_visible = true;
		},
		//编辑标签
		async handleEdit() {
			let { tag_id } = this.edit_form;
			try {
				let valid = await this.$refs.edit_form.validate();
				if (valid) {
					let { status, msg } = await Tag.edit(tag_id, { ...this.edit_form });
					if (status) {
						// 操作DOM
						Object.assign(this.current_tag, this.edit_form);
						// 关闭弹窗
						this.edit_dialog_visible = false;
						// 信息提示
						this.$message.success(msg);
					} else {
						// 信息提示
						this.$message.error(msg);
					}
				}
			} catch (error) {
				console.log(error);
			}
		},
		// 清除表单验证
		handleCloseDialog(formName) {
			this.$refs[formName].resetFields();
		},
		//删除标签
		handleRemove(tag_id,index) {
			this.$confirm('此操作将永久删除该标签, 是否继续?', '确认删除', { type: 'warning' })
				.then(async () => {
					//删除标签
					let { status, msg } = await Tag.remove(tag_id);
					if (status) {
						//操作DOM
						this.tableData.splice(index,1);
						//信息提示
						this.$message.success(msg);
					}else{
						//信息提示
						this.$message.error(msg);
					}
				}).catch(() => {
					this.$message.info('已取消删除');
				});
		},
	},
}
</script>

<style></style>
